<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>十万个为什么</title>
    <link rel="stylesheet" href="./bootstrap.css">
    <link rel="icon" href="./img/Logo.jpg" type="image/x-icon">
    <link rel="stylesheet" href="./swgwhy_main.css">
    <link rel="stylesheet" href="./swgwhy_main_top.css">
    <link rel="stylesheet" href="./font_1hifg03ookt/iconfont.css">
    <style>
        .swgwhy{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            padding-top: 0px;
            margin: 0px;
            background-color: rgb(180, 224, 236);
        }
        .swgwhy .swgwhy_head{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 1440px;
            height: 130px;
            padding-top: 56px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 64px;
        }
        .swgwhy .swgwhy_top{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 1440px;
            height: 100%;
            margin: auto;
        }
        .swgwhy .swgwhy_bottom{
            display: flex;
            justify-content: center;
            width: 100%;
            height: 250px;
            background-color: rgb(72, 0, 122);
            padding-top: 50px;
            padding-bottom: 20px;
        }
        #carouselExampleSlidesOnly {
            width: 1000px;
            height: 130px;
        }
        .container .carousel-item img {
            max-width: 100%;
            max-height: 453px;
            margin: auto;
        }
        .carousel-item img {
            max-width: 100%;
            max-height: 553px;
            margin: auto;
        }
        * {
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
        }
            
                    body {
                        min-height: 100vh;
                        background-color: var(--body-color);
                        transition: all 0.3s ease;
                    }
            
                    /* 设置全局变量 */
                    :root {
                        --body-color: #E4E9F7;
                        --shell-color: #FFF;
                        --primary-color: #695CFE;
                        --primary-color-light: #F6F5FF;
                        --toggle-color: #DDD;
                        --text-color: #707070;
                    }
            
                    /* 深色主题变量 */
                    .dark {
                        --body-color: #202224;
                        --shell-color: #171717;
                        --primary-color: #3a3b3c;
                        --primary-color-light: #3a3b3c;
                        --toggle-color: #fff;
                        --text-color: #ccc;
                    }
            
                    .shell {
                        position: fixed;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 250px;
                        padding: 10px 14px;
                        background: var(--shell-color);
                        transition: all 0.3s ease;
                        z-index: 100;
                    }
            
                    .close {
                        width: 88px;
                    }
            
                    .shell li {
                        height: 50px;
                        list-style: none;
                        display: flex;
                        align-items: center;
                        margin-top: 10px;
                    }
            
                    .image,
                    .icon {
                        min-width: 60px;
                        border-radius: 6px;
                    }
            
                    .icon {
                        min-width: 60px;
                        border-radius: 6px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font: 300 23px '';
                    }
            
                    .text,
                    .icon {
                        color: var(--text-color);
                        transition: all 0.3s ease;
                    }
            
                    .text {
                        font: 500 17px;
                        white-space: nowrap;
                        opacity: 1;
                    }
            
                    .shell.close .text {
                        opacity: 0;
                    }
            
                    header {
                        position: relative;
                    }
            
                    .image-text {
                        display: flex;
                        align-items: center;
                    }
            
                    .logo-text {
                        display: flex;
                        flex-direction: column;
                    }
            
                    .name {
                        margin-top: 2px;
                        font: 600 18px '';
                    }
            
                    .software {
                        font-size: 20px;
                        margin-top: -2px;
                        display: block;
                    }
            
                    .image {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
            
                    .image img {
                        width: 45px;
                        border-radius: 6px;
                    }
            
                    .toggle {
                        position: absolute;
                        top: 50%;
                        right: -25px;
                        transform: translateY(-50%) rotate(180deg);
                        height: 25px;
                        width: 25px;
                        background-color: var(--primary-color);
                        color: var(--shell-color);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 15px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                    }
            
                    .toggle {
                        color: #ccc;
                    }
            
                    .shell.close .toggle {
                        transform: translateY(-50%) rotate(0deg);
                    }
            
                    .menu {
                        margin-top: 40px;
                    }
            
                    li.search-box {
                        border-radius: 6px;
                        background-color: var(--primary-color-light);
                        cursor: pointer;
                        transition: all 0.3s ease;
                    }
            
                    li.search-box input {
                        height: 100%;
                        width: 100%;
                        outline: none;
                        border: none;
                        background-color: var(--primary-color-light);
                        color: var(--text-color);
                        border-radius: 6px;
                        font-size: 17px;
                        font-weight: 500;
                        transition: all 0.3s ease;
                    }
            
                    .shell li a {
                        list-style: none;
                        height: 100%;
                        background-color: transparent;
                        display: flex;
                        align-items: center;
                        height: 100%;
                        width: 100%;
                        border-radius: 6px;
                        text-decoration: none;
                        transition: all 0.3s ease;
                    }
            
                    .shell li a:hover {
                        background-color: var(--primary-color);
                    }
            
                    .shell li a:hover .icon,
                    .shell li a:hover .text {
                        color: var(--shell-color);
                    }
            
                    .menu-bar {
                        height: calc(100% - 55px);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        overflow-y: scroll;
                    }
            
                    .menu-bar::-webkit-scrollbar {
                        display: none;
                    }
            
                    .menu-bar .mode {
                        border-radius: 6px;
                        background-color: var(--primary-color-light);
                        position: relative;
                        transition: all 0.3s ease;
                    }
            
                    .menu-bar .mode .sun-moon {
                        height: 50px;
                        width: 60px;
                    }
            
                    .mode .sun-moon i {
                        position: absolute;
                    }
            
                    .mode .sun-moon i.sun {
                        opacity: 0;
                    }
            
                    .toggle-switch {
                        position: absolute;
                        right: 0;
                        height: 100%;
                        min-width: 60px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 6px;
                        cursor: pointer;
                    }
            
                    .switch {
                        position: relative;
                        height: 22px;
                        width: 40px;
                        border-radius: 25px;
                        background-color: var(--toggle-color);
                        transition: all 0.3s ease;
                    }
            
                    .switch::before {
                        content: '';
                        position: absolute;
                        height: 15px;
                        width: 15px;
                        border-radius: 50%;
                        top: 50%;
                        left: 5px;
                        transform: translateY(-50%);
                        background-color: var(--shell-color);
                        transition: all 0.3s ease;
                    }
            
                    .dark .shell li a:hover .icon,
                    .dark .shell li a:hover .text {
                        color: #ccc;
                    }
            
                    .dark .mode .sun-moon i.sun {
                        opacity: 1;
                    }
            
                    .dark .mode .sun-moon i.moon {
                        opacity: 0;
                    }
            
                    .dark .switch::before {
                        left: 20px;
                    }
    </style>
</head>
<script>
  //鼠标点击事件
  window.onclick = function() {
    const heart = document.createElement("div")
    document.body.appendChild(heart)
    heart.classList.add("heart")
    heart.style.left = event.clientX + "px"
    heart.style.top = event.clientY + "px"
    heart.style.animation = "move 1s normal forwards"
    setTimeout(function () {
        document.body.removeChild(heart)
    },1000)
    heart.style.backgroundColor = "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")"
    };
    //点赞事件
    function jiafunction(){
                    var input = document.getElementById("ip");
                    var currentVal = parseInt(input.value);
                    if(!isNaN(currentVal)){
                        input.value = currentVal + 1;
                    }
                }
    function jiafunction1(){
                    var input = document.getElementById("ip1");
                    var currentVal = parseInt(input.value);
                    if(!isNaN(currentVal)){
                        input.value = currentVal + 1;
                    }
                }
</script>
<body class="swgwhy">
  <div class="swgwhy_ai">
  </head>
  <body>
      <nav class="shell close">
          <header>
              <div class="image-text">
                  <span class="image">
                      <img src="img/Logo.jpg" alt="">
                  </span>
                  <div class="text logo-text">
                      <span class="name">用户名</span>
                      <span class="software">-十万个为什么-</span>
                  </div>
              </div>
              <i class="iconfont icon-xiangyoujiantou toggle"></i>
          </header>
          <div class="menu-bar">
              <div class="menu">
                  <li class="search-box">
                      <i class="iconfont icon-sousuo icon"></i>
                      <input type="text" placeholder="搜索...">
                  </li>
                  <ul class="menu-links">
                      <li class="nav-link">
                          <a href="./swgwhy_AI.html">
                              <i class="iconfont icon-zhuye icon"></i>
                              <span class="text nac-text">主页</span>
                          </a>
                      </li>
  
                      <li class="nav-link">
                          <a href="#">
                              <i class="iconfont icon-wodeshoucang icon"></i>
                              <span class="text nac-text">我的收藏</span>
                          </a>
                      </li>
  
                      <li class="nav-link">
                          <a href="#">
                              <i class="iconfont icon-lishijilu icon"></i>
                              <span class="text nac-text">历史记录</span>
                          </a>
                      </li>
  
                      <li class="nav-link">
                          <a href="#">
                              <i class="iconfont icon-xiaoxi icon"></i>
                              <span class="text nac-text">消息</span>
                          </a>
                      </li>
  
                      <li class="nav-link">
                          <a href="#">
                              <i class="iconfont icon-wuguan icon"></i>
                              <span class="text nac-text">AI</span>
                          </a>
                      </li>
  
                      <li class="nav-link">
                          <a href="#">
                              <i class="iconfont icon-chuangzuozhongxin icon"></i>
                              <span class="text nac-text">创作中心</span>
                          </a>
                      </li>
                  </ul>
              </div>
              <div class="bottom-content">
                  <li class="">
                      <a href="#">
                          <i class="iconfont icon-logout icon"></i>
                          <span class="text nac-text">注销</span>
                      </a>
                  </li>
                  <li class="mode">
                      <div class="sun-moon">
                          <i class="iconfont icon-yejianmoshi icon sun"></i>
                          <i class="iconfont icon-yejian icon moon"></i>
                      </div>
                      <span class="mode-text text">夜间模式</span>
                      <div class="toggle-switch">
                          <span class="switch"></span>
                      </div>
                  </li>
              </div>
          </div>
  
      </nav>
  
  </body>
  
  
  <script>
  
      const body = document.querySelector('body'),
          shell = body.querySelector('nav'),
          toggle = body.querySelector(".toggle"),
          searchBtn = body.querySelector(".search-box"),
          modeSwitch = body.querySelector(".toggle-switch"),
          modeText = body.querySelector(".mode-text");
      // 点击toggle元素时触发事件
      toggle.addEventListener("click", () => {
          // 切换shell元素的close类
          shell.classList.toggle("close");
      })
      // 点击searchBtn元素时触发事件
      searchBtn.addEventListener("click", () => {
          // 移除shell元素的close类
          shell.classList.remove("close");
      })
      // 点击modeSwitch元素时触发事件
      modeSwitch.addEventListener("click", () => {
          // 切换body元素的dark类
          body.classList.toggle("dark");
          // 如果body元素包含dark类
          if (body.classList.contains("dark")) {
              modeText.innerText = "白日模式";
          } else {
              modeText.innerText = "夜间模式";
          }
      });
  
  
  </script>
  
  </html>
  
</div>    
</div>    
    <div class="swgwhy_head">
      <header class="why_head">
        <nav class="why_header">
          <div class="menu-items">
            <a href="#" style="display: flex; text-decoration: none;flex-direction: column; align-items: center;">
                <img src="./img/Logo.jpg" style="width: 120px;height: 120px;border-radius: 50%;"></a>
            <ul class="menu-ul">
                <li class="menu-li-0"><h1></h1></li>
                <li class="menu-li"><a href="./swgwhy_class.html" style="text-decoration: none;color: white;width: 100px;height:56px"><h1 style="width: 100px;height:56px"><b>发现</b></h1></a></li>
                <li class="menu-li"><a href="#" style="text-decoration: none;color: white;width: 100px;height:56px"><h1 style="width: 100px;height:56px"><b>生物</b></h1></a></li>
                <li class="menu-li"><a href="#" style="text-decoration: none;color: white;width: 100px;height:56px"><h1 style="width: 100px;height:56px"><b>科学</b></h1></a></li>
                <li class="menu-li"><a href="#" style="text-decoration: none;color: white;width: 100px;height:56px"><h1 style="width: 100px;height:56px"><b>历史</b></h1></a></li>
                <li class="menu-li"><a href="#" style="text-decoration: none;color: white;width: 100px;height:56px"><h1 style="width: 100px;height:56px"><b>地理</b></h1></a></li>
                <li class="menu-li"><a href="#" style="text-decoration: none;color: white;width: 100px;height:56px"><h1 style="width: 100px;height:56px"><b>其他</b></h1></a></li>
            </ul>
          </div>
        </nav>
      </header>
    </div>
    <main class="swgwhy_top">
      <section class="why_section">
            <div class="grid">
                <div style="width: 985.56px;height: 55px;color: rgb(72, 0, 122);">
                    <h2 style="margin-bottom: 31.765px;margin-top: 0px;font-size: 45px;text-align: center;">
                      <b>十万个为什么</b>
                    </h2>
                </div>
                <div class="container">
                  <article style="width: 985.56px;height: 453px;">
                      <div class="slider">
                          <div id="carouselExampleCaptions5" class="carousel slide" data-ride="carousel">
                                <ol class="carousel-indicators">
                                  <li data-target="#carouselExampleCaptions5" data-slide-to="0" class="active"></li>
                                  <li data-target="#carouselExampleCaptions5" data-slide-to="1"></li>
                                  <li data-target="#carouselExampleCaptions5" data-slide-to="2"></li>
                                  <li data-target="#carouselExampleCaptions5" data-slide-to="3"></li>
                                </ol>
                                <div class="carousel-inner">
                                  <div class="carousel-item active">
                                    <img src="./img/animal1.jpg" class="d-block w-100">
                                    <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                                      <h5><b>虎鲸</b></h5>
                                      <p><b>虎鲸是一种高度社会化的动物，会组成家族，而且是动物世界里最稳定的家族。</b></p>
                                    </div>
                                  </div>
                                  <div class="carousel-item">
                                    <img src="./img/science1.png" class="d-block w-100">
                                    <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                                      <h5><b>机器人</b></h5>
                                      <p><b>机器人能够通过编程和自动控制来执行诸如作业或移动等任务。</b></p>
                                    </div>
                                  </div>
                                  <div class="carousel-item">
                                    <img src="./img/history1.jpg" class="d-block w-100">
                                    <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                                      <h5><b>兵马俑</b></h5>
                                      <p><b>中国古代辉煌文明的一张金字名片，又被誉为世界十大古墓稀世珍宝之一。</b></p>
                                    </div>
                                  </div>
                                  <div class="carousel-item">
                                    <img src="./img/geography1.jpg" class="d-block w-100">
                                    <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                                      <h5><b>喜马拉雅山脉</b></h5>
                                      <p><b>喜马拉雅山脉是世界海拔最高的山脉。</b></p>
                                    </div>
                                  </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions5" data-slide="prev">
                                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                  <span class="sr-only">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions5" data-slide="next">
                                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                  <span class="sr-only">Next</span>
                                </button>
                          </div>
                      </div>
                  </article>
                  <div class="card-video2" style="display: flex;flex-direction: column;align-items: center;width: 985.56px;height: 350px;">
                      <h1 style="width: 985.56px;height: 50px;display: block;
                      text-decoration: none;color: rgb(72, 0, 122);margin: 20px 0px 0px;text-align: center;">
                      为什么鸟可以飞行</h1><p></p>
                      <div style="width: 800px;height: 100%;">
                          <h3 style="text-indent:2em;line-height: 44px;">
                            鸟类能够飞行是由于它们的独特解剖结构和生理适应性。
                            首先，鸟类的骨骼结构是轻巧而坚固的。
                            它们的骨骼中含有空心的空隙，这可以减轻整体重量，使得鸟在空中更加灵活。
                            此外，鸟类的颅骨相对较轻，降低了头部的重量，并且具有联接紧密的关节，提供了飞行所需的支撑和灵活性。
                          </h3>
                      </div>
                      <h5 style="margin-left: 600px;">2024.1 | 每日十万个为什么</h5>
                  </div>
                </div>
                <div class="button-grop"></div>
            </div>
      </section>
      <section class="section-show">
          <header style="width: 985.56px;height: 43px;color: rgb(72, 0, 122);
          display: flex;justify-content: center;margin: 0px 0px 68px;">
          <h2 style="width: 985.56px;height: 43px;margin: 0px;
              font-size: 38px;text-align: center;">内容探索</h2>
          </header>
          <div class="grid-inner">
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/twkx.png">
                      <h3>天文科学</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/swsj.png">
                      <h3>生物世界</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/kxts.png">
                      <h3>科学探索</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/sxly.png">
                      <h3>数学乐园</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/kjmf.png">
                      <h3>科技魔法</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/lswh.png">
                      <h3>历史文化</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/sthj.png">
                      <h3>生态环境</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/sxjk.png">
                      <h3>身心健康</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/shsh.png">
                      <h3>社会生活</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/qm.png">
                      <h3>启蒙</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/sgsy.png">
                      <h3>手工实验</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/ydxz.png">
                      <h3>阅读写作</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/rwys.png">
                      <h3>艺术人文</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/zrkcz.png">
                      <h3>自然观察者</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                  <header>
                      <img src="./img/sjlxz.png">
                      <h3>世界旅行者</h3>
                  </header>
                  <div class="background"></div>
              </a>
              <a class="show-title" href="#">
                <header>
                  <img src="./img/sjlxz.png">
                  <h3>宇宙探险家</h3>
                </header>
              <div class="background"></div>
              </a>
          </div>
          <div class="footer-button-group">
              <a href="#">更多内容</a>
          </div>
      </section>
      <section style="margin-bottom: 80px;">
        <div style="display: flex;flex-direction: column;align-items: center;">
          <h1>顺口溜</h1>
        </div>
        <div id="carouselExampleSlidesOnly" class="carousel-slide" data-ride="carousel" >
            <div class="carousel-inner">
              <div class="carousel-item active">
                <h1 class="d-block w-100" style="text-indent:2em;font-size: 35px;width: 1000px;height: 126px;">
                  保护环境，人人有责，节约用水别浪费。关闭水龙头，流水不留，保护水资源永传承。绿色出行，减少排放，让地球更加美好安宁。
                </h1>
                <div style="display: flex;position: relative;left: 925px;">
                  <div>
                    <button onclick="jiafunction()" style="border: 0px;padding: 0px;width: 25px;height: 25px;margin-right: 5px;"><img src="./img/点赞.png" style="width: 20px;"></button>
                    <p></p><input type="text" value="0" id="ip" style="position: relative;left:5px;bottom: 15px;width: 20px;height: 20px;padding: 0;border: 0;background-color: rgb(180, 224, 236);">
                  </div>
                  <div>
                    <button onclick="jiafunction1()" style="border: 0px;padding: 0px;width: 25px;height: 25px;"><img src="./img/踩.png" style="width: 20px;"></button>
                    <p></p><input type="text" value="0" id="ip1" style="position: relative;left:5px;bottom: 15px;width: 20px;height: 20px;padding: 0;border: 0;background-color: rgb(180, 224, 236);">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <h1 class="d-block w-100" style="text-indent:2em;font-size: 35px;width: 1000px;height: 126px;">
                  太阳能光伏原理，光子能量转为电。太阳光照射硅晶片，电子跃迁产生电。绿色清洁能源，太阳就是我们的朋友。
                </h1>
                <div style="display: flex;position: relative;left: 925px;">
                  <div>
                    <button onclick="jiafunction()" style="border: 0px;padding: 0px;width: 25px;height: 25px;margin-right: 5px;"><img src="./img/点赞.png" style="width: 20px;"></button>
                    <p></p><input type="text" value="0" id="ip" style="position: relative;left:5px;bottom: 15px;width: 20px;height: 20px;padding: 0;border: 0;background-color: rgb(180, 224, 236);">
                  </div>
                  <div>
                    <button onclick="jiafunction1()" style="border: 0px;padding: 0px;width: 25px;height: 25px;"><img src="./img/踩.png" style="width: 20px;"></button>
                    <p></p><input type="text" value="0" id="ip1" style="position: relative;left:5px;bottom: 15px;width: 20px;height: 20px;padding: 0;border: 0;background-color: rgb(180, 224, 236);">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <h1 class="d-block w-100" style="text-indent:2em;font-size: 35px;width: 1000px;height: 126px;">
                  保护地球是我们的责任，减少污染要每天，节约能源就是行动，爱护自然是我们的关键。
                </h1>
                <div style="display: flex;position: relative;left: 925px;">
                  <div>
                    <button onclick="jiafunction()" style="border: 0px;padding: 0px;width: 25px;height: 25px;margin-right: 5px;"><img src="./img/点赞.png" style="width: 20px;"></button>
                    <p></p><input type="text" value="0" id="ip" style="position: relative;left:5px;bottom: 15px;width: 20px;height: 20px;padding: 0;border: 0;background-color: rgb(180, 224, 236);">
                  </div>
                  <div>
                    <button onclick="jiafunction1()" style="border: 0px;padding: 0px;width: 25px;height: 25px;"><img src="./img/踩.png" style="width: 20px;"></button>
                    <p></p><input type="text" value="0" id="ip1" style="position: relative;left:5px;bottom: 15px;width: 20px;height: 20px;padding: 0;border: 0;background-color: rgb(180, 224, 236);">
                  </div>
                </div>
              </div>
            </div>
            <button style="display: flex;float: right;border: 0px;background-color: rgb(180, 224, 236);">
              <a href="#" style="text-decoration: none;">详情页面</a>
            </button>
        </div>
      </section>
      <section class="posts-carousel">
          <div class="regular">
              <h1>生物</h1>
              <p></p>
              <div class="slider">
                  <div id="carouselExampleCaptions0" class="carousel slide" data-ride="carousel">
                      <ol class="carousel-indicators">
                        <li data-target="#carouselExampleCaptions0" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleCaptions0" data-slide-to="1"></li>
                        <li data-target="#carouselExampleCaptions0" data-slide-to="2"></li>
                      </ol>
                      <div class="carousel-inner">
                        <div class="carousel-item active" >
                          <img src="./img/animal1.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>虎鲸</h5>
                            <p>虎鲸是一种高度社会化的动物，会组成家族，而且是动物世界里最稳定的家族。</p>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="./img/animal2.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>熊猫</h5>
                            <p>大熊猫已在地球上生存了至少800万年，被誉为“活化石”和“中国国宝”，世界自然基金会的形象大使。</p>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="./img/animal3.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>鵎鵼</h5>
                            <p>嘴非常漂亮，上半部黄色，略呈淡绿色，下半部呈蔚蓝色，喙尖点缀着一点殷红。</p>
                          </div>
                        </div>
                      </div>
                      <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions0" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </button>
                      <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions0" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </button>
                    </div>
              </div>
              <div class="group">
                  <a href="#">更多内容</a>
              </div>
          </div>
      </section>
      <section class="posts-carousel">
          <div class="regular">
              <h1>科学</h1>
              <p></p>
              <div class="slider">
                  <div id="carouselExampleCaptions1" class="carousel slide" data-ride="carousel">
                      <ol class="carousel-indicators">
                        <li data-target="#carouselExampleCaptions1" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleCaptions1" data-slide-to="1"></li>
                        <li data-target="#carouselExampleCaptions1" data-slide-to="2"></li>
                      </ol>
                      <div class="carousel-inner">
                        <div class="carousel-item active">
                          <img src="./img/science1.png" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 25px;">
                            <h5>机器人</h5>
                            <p>机器人能够通过编程和自动控制来执行诸如作业或移动等任务。</p>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="./img/science2.jpeg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>空间站</h5>
                            <p>一种在近地轨道长时间运行、可供多名航天员巡访、长期工作和生活的载人航天器。</p>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="./img/science3.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>航空母舰</h5>
                            <p>以舰载机为主要战斗装备，并为其提供海上活动基地的大型水面战斗舰艇。</p>
                          </div>
                        </div>
                      </div>
                      <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions1" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </button>
                      <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions1" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </button>
                    </div>
              </div>
              <div class="group">
                  <a href="#">更多内容</a>
              </div>
          </div>
      </section>
      <section class="posts-carousel">
          <div class="regular">
              <h1>历史</h1>
              <p></p>
              <div class="slider">
                  <div id="carouselExampleCaptions2" class="carousel slide" data-ride="carousel">
                      <ol class="carousel-indicators">
                        <li data-target="#carouselExampleCaptions2" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleCaptions2" data-slide-to="1"></li>
                        <li data-target="#carouselExampleCaptions2" data-slide-to="2"></li>
                      </ol>
                      <div class="carousel-inner">
                        <div class="carousel-item active">
                          <img src="./img/history1.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>兵马俑</h5>
                            <p>中国古代辉煌文明的一张金字名片，又被誉为世界十大古墓稀世珍宝之一。</p>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="./img/history2.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>金字塔</h5>
                            <p>这些巨大的陵墓外形形似汉字的“金”字，因此我们将其称之为“金字塔”。</p>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="./img/history3.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>长城</h5>
                            <p>是中国古代的军事防御工事，是一道高大、坚固而且连绵不断的长垣，用以限隔敌骑的行动。</p>
                          </div>
                        </div>
                      </div>
                      <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions2" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </button>
                      <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions2" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </button>
                    </div>
              </div>
              <div class="group">
                  <a href="#">更多内容</a>
              </div>
          </div>
      </section>
      <section class="posts-carousel">
          <div class="regular">
              <h1>地理</h1>
              <p></p>
              <div class="slider">
                  <div id="carouselExampleCaptions3" class="carousel slide" data-ride="carousel">
                      <ol class="carousel-indicators">
                        <li data-target="#carouselExampleCaptions3" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleCaptions3" data-slide-to="1"></li>
                        <li data-target="#carouselExampleCaptions3" data-slide-to="2"></li>
                      </ol>
                      <div class="carousel-inner">
                        <div class="carousel-item active">
                          <img src="./img/geography1.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>喜马拉雅山脉</h5>
                            <p>喜马拉雅山脉是世界海拔最高的山脉。</p>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="./img/geography2.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>壶口瀑布</h5>
                            <p>壶口瀑布是中国第二大瀑布，世界上最大的黄色瀑布。</p>
                          </div>
                        </div>
                        <div class="carousel-item">
                          <img src="./img/geography3.jpg" class="d-block w-100">
                          <div class="carousel-caption d-none d-md-block" style="color:black;font-size: 20px;">
                            <h5>鄱阳湖</h5>
                            <p>中国第一大淡水湖，也是中国第二大湖，仅次于青海湖。</p>
                          </div>
                        </div>
                      </div>
                      <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions3" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </button>
                      <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions3" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </button>
                    </div>
              </div>
              <div class="group">
                  <a href="#">更多内容</a>
              </div>
          </div>
      </section>
    </main>
    <div class="swgwhy_bottom">
        <div class="swgwhy_foot">
            <div class="foot_top">
                <img src="./img/Logo.jpg" style="width: 75px;height: 75px;margin-right: 40px;border-radius: 50%;"><img src="./img/jk-logo.png" style="width: 75px;height: 75px;">
            </div>
            <div class="footer">
                <h2 style="color: white;margin: 0px;font-size: 15px;">版权所有@江西科技学院瀚岳软件工作室</h2>
                <p></p>
                <nav style="margin-top: 30px;">
                  <a href="#" style="text-decoration: none;color: white;font-size: 12px;">条款和条件</a> 
                  <span style="font-size: 15px;color: white;">·</span> 
                  <a href="#" style="text-decoration: none;color: white;font-size: 12px;">隐私政策</a>
                  <span style="font-size: 15px;color: white;">·</span> 
                  <a href="#" style="text-decoration: none;color: white;font-size: 12px;">关于十万个为什么的重要通知</a>
                  <span style="font-size: 15px;color: white;">·</span> 
                  <a href="#" style="text-decoration: none;color: white;font-size: 12px;">十万个为什么偏好</a>
                  <span style="font-size: 15px;color: white;">·</span> 
                  <a href="#" style="text-decoration: none;color: white;font-size: 12px;">行为准则</a>
                  <span style="font-size: 15px;color: white;">·</span> 
                  <a href="#" style="text-decoration: none;color: white;font-size: 12px;">联系我们</a>
                  <span style="font-size: 15px;color: white;">·</span> 
                  <a href="#" style="text-decoration: none;color: white;font-size: 12px;">关于江西科技学院</a>
                </nav>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="./bootstrap.bundle.min.js"></script>
    <script src="./bootstrap.js"></script>
</body>
</html>